<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-button type="success" icon="search" @click="add" style="margin-left: 760px">新增</el-button>
            </div>
            <el-table v-loading="loading" :data="options" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="名称" width="250">
                  <template scope="scope">
                    <el-input v-model="scope.row.p_name" placeholder="输入分类名称" @change="updateChange(scope.$index,scope.row)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="orderindex" label="排序" width="150">
                    <template scope="scope">
                        <el-input-number v-model="scope.row.orderindex" @change="updateChangePx(scope.$index,scope.row)" :min="0" :max="10000" label="描述文字"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
                <!--<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="100">-->
                <!--</el-pagination>-->
            <!--</div>-->
        </div>
        <!-- 新增弹出框 -->
        <el-dialog title="新增" :visible.sync="addVisible" width="30%">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="分类名称">
              <el-input v-model="p_name"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="orderindex" :min="0" :max="10000" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="addVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import VueCropper  from 'vue-cropperjs';
    export default {
        data() {
            return {
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                addVisible: false,
                delVisible: false,
                imgVisible:false,
                form: {
                    name: '',
                    orderindex: '',
                    is_show: '',
                    imgurl: '',
                    p_name: ''
                },
                idx: -1,
              fileList: [],
              imgSrc: '',
              cropImg: '',
              id:'',
              options:[],
              loading: false,
              delId:'',
              add_select_cate:'',
              add_select_name:'',
              add_orderindex:0,
              add_is_show:true,
              add_imgurl:'./static/img/upload.png',
              add_imgurl2:'',
              error_imgurl:'',
              names:[],
              p_name:'',
              orderindex:''
            }
        },
          components: {
            VueCropper
          },
        created() {
            this.getData();
        },
        computed: {
        },
        methods: {
          //新增提交
          onSubmit() {
            let self = this
            this.$axios.post(`https://dttx.0576sj.com/moblie/tongji/insertCollection`, self.qs.stringify({
              p_name: self.p_name,
              orderindex: self.orderindex
            })).then((res) => {
              if(res.data.code == 0){
                this.$message.error(res.data.msg);
                return
              }
              this.getData();
              this.$message.success('提交成功！');
            })
          },
          updateChange(index,data){
              let self = this
              this.$axios.post(`https://dttx.0576sj.com/moblie/tongji/updateCollection`, self.qs.stringify({
                p_name:data.p_name,
                id:data.id,
                orderindex:data.orderindex
              })).then((res) => {
                if(res.data.code == 0){
                  self.$message.error(res.data.msg);
                  self.delVisible = false;
                  self.getData();
                  return
                }
              })
            },
          updateChangePx(index,data){
            let self = this
            this.$axios.post(`https://dttx.0576sj.com/moblie/tongji/updateCollection`, self.qs.stringify({
              id:data.id,
              orderindex:data.orderindex
            })).then((res) => {
              if(res.data.code == 0){
                self.$message.error(res.data.msg);
                self.delVisible = false;
                self.getData();
                return
              }
            })
          },
            // 获取数据
            getData() {
              this.loading = true
              this.$axios.get('https://dttx.0576sj.com/moblie/tongji/getcollection', {
              }).then((res) => {
                this.options = res.data;
                this.loading = false
              })
            },
            handleDelete(index, data) {
                this.idx = index;
                this.delId = data.id
                this.delVisible = true;
            },
            //批量删除
            delAll() {
                const arr = []
                let self = this
                for(var i in this.multipleSelection){
                  arr.push(this.multipleSelection[i].id)
                }
                var arrNew = JSON.stringify(arr)
              this.$axios.post(`https://dttx.0576sj.com/moblie/tongji/deleteCollection`, self.qs.stringify({
                id:arrNew
              })).then((res) => {
                if(res.data.code == 0){
                  self.$message.error(res.data.msg);
                  self.delVisible = false;
                  return
                }
                self.$message.success('删除成功');
                self.getData();
                self.delVisible = false;
              })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 确定删除
            deleteRow(){
              let self = this
              var arr = JSON.stringify([self.delId]);
              this.$axios.post(`https://dttx.0576sj.com/moblie/tongji/deleteCollection`, self.qs.stringify({
                    id:arr
                })).then((res) => {
                  if(res.data.code == 0){
                    self.$message.error(res.data.msg);
                    return
                  }
                self.options.splice(self.idx, 1);
                self.$message.success('删除成功');
                self.delVisible = false;
              })
            },
          //新增
          add(){
            this.addVisible = true
          }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
    .pre-img{
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
  .add_input{
    width: 102px;
    height: 102px;
    position: absolute;
    left: 50px;
    top: 0;
    opacity: 0;
  }
</style>
